import React, { Component } from 'react'
import { NavigationContainer, RouteProp, getFocusedRouteNameFromRoute } from '@react-navigation/native'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import Home from '@/pages/Home'
import Listen from '@/pages/Listen'
import Found from '@/pages/Found'
import Account from '@/pages/Account'
import { RootStackNavigation, RootStackParamList } from '.'
// 定义底部标签栏的项
export type BottomTabParamList = {
  Home: undefined;
  Listen: undefined;
  Found: undefined;
  Account: undefined;
}
const Tab = createBottomTabNavigator<BottomTabParamList>()

type Route = RouteProp<RootStackParamList, 'BottomTabs'>

interface IProps {
  navigation: RootStackNavigation;
  route: Route
}

function getHeaderTitle(route: Route) {
  const routeName = getFocusedRouteNameFromRoute(route)||'Home'
  console.log(routeName);
  switch(routeName) {
    case 'Home': return '首页';
    case 'Listen': return '我听';
    case 'Found': return '发现';
    case 'Account': return '我的';
    default: return '首页';
  }
}
export default class BottomTabs extends Component<IProps> {
  componentDidUpdate() {
    const {navigation, route} = this.props
    navigation.setOptions({
      headerTitle: getHeaderTitle(route)
    })
  }
  render() {
    return (
      // <NavigationContainer>
        <Tab.Navigator
          tabBarOptions={{
            activeTintColor: '#f86442'
        }}>
          <Tab.Screen
            name="Home"
            component={Home}
            options={{title:"首页"}}
          />
          <Tab.Screen
            name="Listen"
            component={Listen}
            options={{title:"我听"}}
          />
          <Tab.Screen
            name="Found"
            component={Found}
            options={{title:"发现"}}
          />
          <Tab.Screen
            name="Account"
            component={Account}
            options={{title:"我的"}}
          />
        </Tab.Navigator>
      // </NavigationContainer>
    )
  }
}